<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JS Demo</title>

<style type="text/css" media="all">
	@import "client-side-constraint.css";
</style>
<style>
form .disabled_form_error_message,
fieldset .disabled_error_message {
	display: none;
}

fieldset .button label,
fieldset .content_button label,
fieldset .checkbox label,
fieldset .file label,
fieldset .image label,
fieldset .multi label,
fieldset .password label,
fieldset .radio label,
fieldset .radiogroup label,
fieldset .select label,
fieldset .text label,
fieldset .textarea label
{
	width: 8em;
}

fieldset .label .comment {
	display: inline;
	margin-left: 0.5em;
	color: #666;
	background-color: #ffc;
}
</style>

</head>
<body>
<form action="" enctype="multipart/form-data" id="form" method="post" onsubmit="formfu.id.filter_trimedges('form_username'); formfu.id.reset(); formfu.id.constraint_required('form_username','form_username_constraint_required','form_username_container'); formfu.id.constraint_maxlength('form_username','form_username_constraint_maxlength','form_username_container',8); formfu.id.check_field('form_username','form_username_container'); formfu.id.constraint_required('form_password','form_password_constraint_required','form_password_container'); formfu.id.constraint_minlength('form_password','form_password_constraint_minlength','form_password_container',3); formfu.id.check_field('form_password','form_password_container'); formfu.id.constraint_equal('form_repeat_password','form_repeat_password_constraint_equal','form_repeat_password_container','form_password'); formfu.id.check_field('form_repeat_password','form_repeat_password_container'); formfu.id.constraint_required('form_age','form_age_constraint_required','form_age_container'); formfu.id.constraint_integer('form_age','form_age_constraint_integer','form_age_container'); formfu.id.constraint_min('form_age','form_age_constraint_min','form_age_container',18); formfu.id.check_field('form_age','form_age_container'); return formfu.id.check_form('form_error_message');">

<div class="disabled_form_error_message" id="form_error_message">
</div>
<script type="text/javascript;version=1.1">
/* our global variable */
var formfu = formfu ? formfu : new Object;
formfu.id = new Object;
formfu.id.errors = new Object;

/* functions */
formfu.id.reset = function ( field_id ) {
	if ( field_id == undefined ) {
		formfu.id.errors = new Object;
	}
	else {
		formfu.id.errors[field_id] = 0;
	}
}

formfu.id.check_field = function ( field_id, container_id ) {
	var container = document.getElementById( container_id );
	var errors    = formfu.id.errors[field_id];
	
	if ( errors ) {
		var class = container.attributes['class'];
		class.value = class.value.replace(/\bdisabled_error\b/, 'error');
		return false;
	}

	var class = container.attributes['class'];
	class.value = class.value.replace(/\berror\b/, 'disabled_error');
	return true;
}

formfu.id.check_form = function ( message_id ) {
	var errors  = formfu.id.errors;
	var message = document.getElementById(message_id);
	
	for ( var key in errors ) {
		if ( errors[key] > 0 ) {
			var class = message.attributes['class'];
			class.value = class.value.replace(/\bdisabled_form_error_message\b/, 'form_error_message');
			return false;
		}
	}

	var class = message.attributes['class'];
	class.value = class.value.replace(/\bform_error_message\b/, 'disabled_form_error_message');
	return true;
}

formfu.id.set_error = function ( field_id, message_id, container_id ) {
	var class = document.getElementById(message_id).attributes['class'];
	class.value = class.value.replace(/\bdisabled_error_message\b/, 'error_message');
	
	var error = (formfu.id.errors[field_id] ? formfu.id.errors[field_id] : 0);
	formfu.id.errors[field_id] = error + 1;
}

formfu.id.clear_error = function ( field_id, message_id, container_id ) {
	var class = document.getElementById(message_id).attributes['class'];
	class.value = class.value.replace(/\berror_message\b/, 'disabled_error_message');
}

formfu.id.filter_trimedges = function ( field_id ) {
	var field = document.getElementById( field_id );
	var value = field.value
	
	value = value.replace(/^\s+/, '');
	value = value.replace(/\s+$/, '');
	
	field.value = value;
}

formfu.id.constraint_required = function ( field_id, message_id, container_id ) {
	var value = document.getElementById(field_id).value;
	
	if ( value == '' ) {
		formfu.id.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id.clear_error( field_id, message_id, container_id );
	}
}

formfu.id.constraint_integer = function ( field_id, message_id, container_id ) {
	var value = document.getElementById(field_id).value;
	var regex = /^\d*$/;
	
	if ( value != '' && ! regex.exec( value ) ) {
		formfu.id.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id.clear_error( field_id, message_id, container_id );
	}
}

formfu.id.constraint_min = function ( field_id, message_id, container_id, min ) {
	var value = document.getElementById(field_id).value;
	
	if ( value != '' && value < min ) {
		formfu.id.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id.clear_error( field_id, message_id, container_id );
	}
}

formfu.id.constraint_minlength = function ( field_id, message_id, container_id, min ) {
	var value = document.getElementById(field_id).value;
	
	if ( value != '' && value.length < min ) {
		formfu.id.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id.clear_error( field_id, message_id, container_id );
	}
}

formfu.id.constraint_maxlength = function ( field_id, message_id, container_id, max ) {
	var value = document.getElementById(field_id).value;
	
	if ( value != '' && value.length > max ) {
		formfu.id.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id.clear_error( field_id, message_id, container_id );
	}
}

formfu.id.constraint_equal = function ( field_id, message_id, container_id, target_id ) {
	var value  = document.getElementById(field_id).value;
	var target = document.getElementById(target_id).value;
	
	if ( value == target ) {
		formfu.id.clear_error( field_id, message_id, container_id );
	}
	else {
		formfu.id.set_error( field_id, message_id, container_id );
	}
}

formfu.id.append_error_message = function ( message_id, message ) {
	var text = document.createTextNode(message);
	
	document.getElementById(message_id).appendChild( text );
}

/* form_error_message */
formfu.id.append_error_message('form_error_message','There were errors with your submission, see below for details');
</script>

<fieldset>
<legend>Form 1</legend>

<span class="text label disabled_error error_constraint_required" id="form_username_container">
<span class="disabled_error_message error_constraint_required" id="form_username_constraint_required">
</span>
<span class="disabled_error_message error_constraint_maxlength" id="form_username_constraint_maxlength">
</span>
<label>Username</label>
<input name="username" type="text" id="form_username" onblur="formfu.id.filter_trimedges('form_username'); formfu.id.reset('form_username'); formfu.id.constraint_required('form_username','form_username_constraint_required','form_username_container'); formfu.id.constraint_maxlength('form_username','form_username_constraint_maxlength','form_username_container',8); formfu.id.check_field('form_username','form_username_container');" />
<span class="comment">
filters[trimedges], constraints[required, maxlength(8)]
</span>
</span>
<script type="text/javascript;version=1.1">
formfu.id.append_error_message('form_username_constraint_required', 'This field is required');
formfu.id.append_error_message('form_username_constraint_maxlength', 'Maximum length of 8 characters');
</script>

<span class="password label disabled_error error_constraint_required error_constraint_minlength" id="form_password_container">
<span class="disabled_error_message error_constraint_required" id="form_password_constraint_required">
</span>
<span class="disabled_error_message error_constraint_minlength" id="form_password_constraint_minlength">
</span>
<label>Password</label>
<input name="password" type="password" id="form_password" onblur="formfu.id.reset('form_password'); formfu.id.constraint_required('form_password','form_password_constraint_required','form_password_container'); formfu.id.constraint_minlength('form_password','form_password_constraint_minlength','form_password_container',3); formfu.id.check_field('form_password','form_password_container');" />
<span class="comment">
constraints[required, minlength(3)]
</span>
</span>
<script type="text/javascript;version=1.1">
formfu.id.append_error_message('form_password_constraint_required', 'This field is required');
formfu.id.append_error_message('form_password_constraint_minlength', 'Minimum length of 3 characters');
</script>

<span class="password label disabled_error error_constraint_equal" id="form_repeat_password_container">
<span class="disabled_error_message error_constraint_equal" id="form_repeat_password_constraint_equal">
</span>
<label>Repeat Password</label>
<input name="repeat_password" type="password" id="form_repeat_password" onblur="formfu.id.reset('form_repeat_password'); formfu.id.constraint_equal('form_repeat_password','form_repeat_password_constraint_equal','form_repeat_password_container','form_password'); formfu.id.check_field('form_repeat_password','form_repeat_password_container');" />
<span class="comment">
constraints[equal(password)]
</span>
</span>
<script type="text/javascript;version=1.1">
formfu.id.append_error_message('form_repeat_password_constraint_equal', 'Must be the same as \'Password\'');
</script>

</fieldset>
<fieldset>

<span class="text label disabled_error error_constraint_required error_constraint_integer error_constraint_min" id="form_age_container">
<span class="disabled_error_message error_constraint_required" id="form_age_constraint_required">
</span>
<span class="disabled_error_message error_constraint_integer" id="form_age_constraint_integer">
</span>
<span class="disabled_error_message error_constraint_min" id="form_age_constraint_min">
</span>
<label>Age</label>
<input name="age" type="text" id="form_age" onblur="formfu.id.reset('form_age'); formfu.id.constraint_required('form_age','form_age_constraint_required','form_age_container'); formfu.id.constraint_integer('form_age','form_age_constraint_integer','form_age_container'); formfu.id.constraint_min('form_age','form_age_constraint_min','form_age_container',18); formfu.id.check_field('form_age','form_age_container');" />
<span class="comment">
constraints[required, integer, min(18)]
</span>
</span>
<script type="text/javascript;version=1.1">
formfu.id.append_error_message('form_age_constraint_required', 'This field is required');
formfu.id.append_error_message('form_age_constraint_integer', 'This field must be an integer');
formfu.id.append_error_message('form_age_constraint_min', 'Must be at least 18');
</script>

</fieldset>
<fieldset>

<span class="submit">
<input name="submit" type="submit">
</span>
</fieldset>
</form>

<!-- FORM 2 -->
<form action="" enctype="multipart/form-data" id="form" method="post" onsubmit="formfu.id2.reset(); formfu.id2.constraint_required('form2_username','form2_username_constraint_required','form2_username_container'); formfu.id2.constraint_maxlength('form2_username','form2_username_constraint_maxlength','form2_username_container',8); formfu.id2.check_field('form2_username','form2_username_container'); return formfu.id2.check_form('form2_error_message');">

<div class="disabled_form_error_message" id="form2_error_message">
</div>
<script type="text/javascript">
/* our global variable */
var formfu = formfu ? formfu : new Object;
formfu.id2 = new Object;
formfu.id2.errors = new Object;

/* functions */
formfu.id2.reset = function ( field_id ) {
	if ( field_id == undefined ) {
		formfu.id2.errors = new Object;
	}
	else {
		formfu.id2.errors[field_id] = 0;
	}
}

formfu.id2.check_field = function ( field_id, container_id ) {
	var container = document.getElementById( container_id );
	var errors    = formfu.id2.errors[field_id];
	
	if ( errors ) {
		var class = container.attributes['class'];
		class.value = class.value.replace(/\bdisabled_error\b/, 'error');
		return false;
	}

	var class = container.attributes['class'];
	class.value = class.value.replace(/\berror\b/, 'disabled_error');
	return true;
}

formfu.id2.check_form = function ( message_id ) {
	var errors  = formfu.id2.errors;
	var message = document.getElementById(message_id);
	
	for ( var key in errors ) {
		if ( errors[key] > 0 ) {
			var class = message.attributes['class'];
			class.value = class.value.replace(/\bdisabled_form_error_message\b/, 'form_error_message');
			return false;
		}
	}

	var class = message.attributes['class'];
	class.value = class.value.replace(/\bform_error_message\b/, 'disabled_form_error_message');
	return true;
}

formfu.id2.set_error = function ( field_id, message_id, container_id ) {
	var class = document.getElementById(message_id).attributes['class'];
	class.value = class.value.replace(/\bdisabled_error_message\b/, 'error_message');
	
	var error = (formfu.id2.errors[field_id] ? formfu.id2.errors[field_id] : 0);
	formfu.id2.errors[field_id] = error + 1;
}

formfu.id2.clear_error = function ( field_id, message_id, container_id ) {
	var class = document.getElementById(message_id).attributes['class'];
	class.value = class.value.replace(/\berror_message\b/, 'disabled_error_message');
}

formfu.id2.constraint_required = function ( field_id, message_id, container_id ) {
	var value = document.getElementById(field_id).value;
	
	if ( value.length == 0 ) {
		formfu.id2.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id2.clear_error( field_id, message_id, container_id );
	}
}

formfu.id2.constraint_maxlength = function ( field_id, message_id, container_id, max ) {
	var value = document.getElementById(field_id).value;
	
	if ( value.length > max ) {
		formfu.id2.set_error( field_id, message_id, container_id );
	}
	else {
		formfu.id2.clear_error( field_id, message_id, container_id );
	}
}

formfu.id2.append_error_message = function ( message_id, message ) {
		var text = document.createTextNode(message);
		
		document.getElementById(message_id).appendChild( text );
}

/* form2_error_message */
formfu.id2.append_error_message('form2_error_message','There were errors with your submission, see below for details');
</script>

<fieldset>
<legend>Form 2</legend>

<span class="text label disabled_error error_constraint_required" id="form2_username_container">
<span class="disabled_error_message error_constraint_required" id="form2_username_constraint_required">
</span>
<span class="disabled_error_message error_constraint_maxlength" id="form2_username_constraint_maxlength">
</span>
<label>Username</label>
<input name="username" type="text" id="form2_username" onblur="formfu.id2.reset('form2_username'); formfu.id2.constraint_required('form2_username','form2_username_constraint_required','form2_username_container'); formfu.id2.constraint_maxlength('form2_username','form2_username_constraint_maxlength','form2_username_container',8); formfu.id2.check_field('form2_username','form2_username_container');" />
<span class="comment">
constraints[required, maxlength(8)]
</span>
</span>
<script type="text/javascript">
formfu.id2.append_error_message('form2_username_constraint_required', 'This field is required');
formfu.id2.append_error_message('form2_username_constraint_maxlength', 'Maximum length of 8 characters');
</script>

<span class="submit">
<input name="submit" type="submit">
</span>
</fieldset>
</form>


</body>
</html>
